import {Button, Switch} from "antd";
import {PageContainer} from "@ant-design/pro-layout";
import {subscription} from "@/services/ant-design-pro/management";
import Deletes from "@/pages/Management/components/Deletes";
import Bianji from "@/pages/Management/Message/Subscribe/components/Bianji";
import {useRef, useState} from "react";
import ProTable, {ActionType} from "@ant-design/pro-table";
import AddMuoban from "@/pages/Management/Message/Subscribe/components/AddMuoban";

export default () => {
  const actionRef = useRef<ActionType>()
  const [DeletesIsShowEdit, setDeletesIsShowEdit] = useState(false);
  const [isShowEdit, setIsShowEdit] = useState(false);
  const [IsShowAdd, setIsShowAdd] = useState(false);
  const [isMyId, setMyId] = useState(false);
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      search: false,
      align: "center",
      width: 48,
    },
    {
      title: '模板ID',
      dataIndex: 'template_id',
      search: false,
      width: 400,
    },
    {
      title: '模板名',
      dataIndex: 'name',
      align: "center",
      onFilter: true,
      width: 300,
    },
    {
      title: '回复内容',
      dataIndex: 'content',
      width: 450,
      search: false
    },
    {
      title: '状态',
      align: "center",
      dataIndex: 'status',
      valueType: 'select',
      render: () => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
      ),
      valueEnum: {
        processing: {
          text: '开启',
          status: 'Processing',
        },
        one: {
          text: '关闭',
          status: 'no',
        }
      },
    },
    {
      title: '添加时间',
      dataIndex: 'created_at',
      search: false,
      width: 200,
    },
    {
      title: '操作',
      align: "center",
      valueType: 'option',
      render: (_,record) => [
        <a onClick={() => {
          setIsShowEdit(true)
          setMyId(record)
        }}>编辑</a>,
        <a onClick={() => {
          setDeletesIsShowEdit(true)
        }}>删除</a>,
      ],
    },
  ];
  return (
    <PageContainer
      header={ {
        title: '小程序订阅消息',
        breadcrumb: {},
      } }
    >
      <div style={ {background:'white',padding: '15px'} }>
        <Button type="primary" onClick={()=>{setIsShowAdd(true)}}>添加模板消息</Button>
      </div>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        editable={ {
          type: 'multiple',
        } }
        request={async (params = {}) => {
          let {data, meta} = await subscription({...params})
          return {
            data,
            success: true,
            total: meta.pagination.total,
          }
        }}
        rowKey="id"
        search={ {
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 5
        } }
        dateFormatter="string"
        headerTitle="小程序订阅消息"
      />
      <Bianji isMyUid={isMyId} isBianji={isShowEdit} isBianjiData={setIsShowEdit} Formlist={(values)=>{
        actionRef.current.reload()
      }}/>
      <AddMuoban AddMuoban={IsShowAdd} Muoban={setIsShowAdd} Formlist={(value)=>{
        actionRef.current.reload()}}/>
      <Deletes isshow={DeletesIsShowEdit} setisshow={setDeletesIsShowEdit}/>
    </PageContainer>
   );
};
